<template>
	<view class="push-container">
		<view class="header">
			<text class="title">消息推送</text>
		</view>
		
		<view class="content">
			<view class="message-list">
				<view class="message-item" v-for="(item, index) in messageList" :key="index" @click="viewMessage(item)">
					<view class="message-icon" :class="item.type">
						<text class="icon-text">{{ getIconText(item.type) }}</text>
					</view>
					<view class="message-content">
						<view class="message-header">
							<text class="message-title">{{ item.title }}</text>
							<text class="message-time">{{ item.time }}</text>
						</view>
						<text class="message-desc">{{ item.content }}</text>
						<view class="message-status" v-if="!item.read">
							<view class="unread-dot"></view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="empty-state" v-if="messageList.length === 0">
				<view class="empty-icon">📭</view>
				<text class="empty-text">暂无消息</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			messageList: [
				{
					id: 1,
					type: 'system',
					title: '系统通知',
					content: '您的账号已成功注册，欢迎使用义诊活动预约系统！',
					time: '2024-01-20 10:30',
					read: false
				},
				{
					id: 2,
					type: 'activity',
					title: '活动通知',
					content: '春季健康义诊活动将于2024年2月1日举行，请及时关注。',
					time: '2024-01-19 15:20',
					read: false
				},
				{
					id: 3,
					type: 'appointment',
					title: '预约提醒',
					content: '您预约的儿童健康筛查活动将于明天下午2点开始，请准时参加。',
					time: '2024-01-18 09:15',
					read: true
				},
				{
					id: 4,
					type: 'system',
					title: '系统维护',
					content: '系统将于1月20日22:00-24:00进行维护，期间可能无法正常使用。',
					time: '2024-01-17 16:45',
					read: true
				}
			]
		}
	},
	methods: {
		getIconText(type) {
			const iconMap = {
				'system': '🔔',
				'activity': '🏥',
				'appointment': '📅',
				'reminder': '⏰'
			};
			return iconMap[type] || '📢';
		},
		
		viewMessage(message) {
			// 标记为已读
			message.read = true;
			
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.push-container {
	min-height: 100vh;
	background: #f5f5f5;
}

.header {
	background: #ffffff;
	padding: 40rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.title {
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}
}

.content {
	padding: 20rpx;
}

.message-list {
	.message-item {
		display: flex;
		background: #ffffff;
		border-radius: 15rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		
		.message-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			
			&.system {
				background: #e3f2fd;
			}
			
			&.activity {
				background: #e8f5e8;
			}
			
			&.appointment {
				background: #fff3e0;
			}
			
			&.reminder {
				background: #fce4ec;
			}
			
			.icon-text {
				font-size: 32rpx;
			}
		}
		
		.message-content {
			flex: 1;
			position: relative;
			
			.message-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				
				.message-title {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
				}
				
				.message-time {
					font-size: 22rpx;
					color: #999999;
				}
			}
			
			.message-desc {
				font-size: 26rpx;
				color: #666666;
				line-height: 1.4;
			}
			
			.message-status {
				position: absolute;
				top: 0;
				right: 0;
				
				.unread-dot {
					width: 16rpx;
					height: 16rpx;
					background: #ff4757;
					border-radius: 50%;
				}
			}
		}
	}
}

.empty-state {
	text-align: center;
	padding: 100rpx 40rpx;
	
	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999999;
	}
}
</style> 